<template>
  <div class="index-container">
    <router-view @currentShops="currentShops"></router-view>

    <van-tabbar v-model="active" active-color="#ffbf05" inactive-color="#6e6e6e" v-if="$route.meta.show">
      <van-tabbar-item icon="shop-o">{{ $t('h.shops') }}</van-tabbar-item>
      <van-tabbar-item icon="apps-o">{{ $t('h.menu') }}</van-tabbar-item>
      <van-tabbar-item icon="notes-o">{{ $t('h.order') }}</van-tabbar-item>
      <van-tabbar-item icon="user-o">{{ $t('h.account') }}</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      active: 0
    }
  },
  watch: {
    active(val) {
      switch (val) {
        case 0:
          this.$router.replace({ name: 'home' })
          break
        case 1:
          this.$router.push({ name: 'goods' })
          break
        case 2:
          this.$router.push({ name: 'orders' })
          break
        case 3:
          this.$router.push({ name: 'acchome' })
          break
      }
    }
  },
  mounted() {
    // 刷新页面初始化路由
    if (this.$route.name !== 'shops') {
      this.$router.replace({ name: 'home' })
    }
  },
  methods: {
    currentShops() {
      this.active = 1
    }
  }
}
</script>

<style lang="less">
.van-tabbar--fixed {
  max-width: 640px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0px 3px 6px 1px #e0e0e0;
  z-index: 999;
}
</style>
